<DOCTYPE html>
    <html>
    <head>
        <title>list-item选项卡</title>
        <meta charset="utf-8">
        <style type="text/css">
            body {
                font-size: 0;
            }

            .right-note-list {
                text-align: center;
            }

            .right-note-list .list-item {
                display: inline-block;
                width: 120px;
                height: 44px;
                padding: 7px;
                border: 1px solid #ccc;
                border-bottom: 0px;
                box-sizing: border-box;
                background: #fff;
                font-size: 16px;
                line-height: 26px;
                color: #555;
                transition: all 0.5s linear;
            }

            .right-note-list .list-item:hover {
                background: #eee;
                transition: all 0.5s linear;
            }

            .notes {
                width: 800px;
                height: 400px;
                margin: 0 auto;
            }

            .notes .list {
                width: 800px;
                height: 400px;
                border: 1px solid #ccc;
                padding: 10px;
                position: absolute; /*堆一起*/
                z-index: 1;
                box-sizing: border-box;
            }

            .list img {
                height: 300px;
                width: auto;
                margin: 40px auto;
            }

            .right-note-list > .list-item:nth-child(1):hover ~ .notes > .list:nth-child(1),
            .right-note-list > .list-item:nth-child(2):hover ~ .notes > .list:nth-child(2),
            .list:hover {
                z-index: 2;
            }
        </style>
    </head>
    <body>
    <div class="right-note-list">
        <a class="list-item">哇咔咔</a>
        <a class="list-item">太棒了</a>

        <div class="notes">
            <div class="list"><img src="images/left01.jpeg"></div>
            <div class="list"><img src="images/left02.jpeg"></div>
        </div>
    </div>
    </body>
    </html>
